CloudFront経由でS3の静的Webサイトを公開する手順
2024.08.21はじめに
本記事では、CloudFrontを経由してS3内にある静的ウェブサイトを公開する方法を説明します。S3のみで静的ウェブサイトを公開する場合、パブリックアクセスのブロックをすべてオフにする必要がありますが、CloudFrontを経由することで、パブリックアクセスのブロックをすべてオンのままアクセスできるようになります。これにより、セキュリティが向上します。
S3バケットの作成とHTMLファイルのアップロード
まず、S3バケットを作成し、簡単なHTMLファイルをアップロードします。下記の記事を参考に作成してください。ただし、本記事ではパブリックアクセスのブロックをすべてオンの状態で進めます。
また、S3の静的ウェブサイトホスティング機能は、この方法では利用しません。
オリジンアクセスコントロール（OAC）の設定
S3で静的Webサイトの作成が終わったら、CloudFrontのオリジンアクセスコントロール設定を作成します。
CloudFrontのコンソールで「オリジンアクセス」を選択し、「コントロール設定を作成」をクリックします。
・名前を入力します。
・署名リクエストのオリジンタイプとして「S3」を選択します。
「Create」をクリックして作成します。
ディストリビューションの作成
次に、CloudFrontディストリビューションを作成します。
CloudFrontコンソールで「ディストリビューション」を選択し、「ディストリビューションの作成」をクリックします。
オリジン設定：
Origin Domainで作成したS3バケットを選択します。
オリジンアクセスで「Origin access control settings (recommended)」を選択します。
Origin access controlで先ほど作成したOACを選択します。
デフォルトのキャッシュビヘイビア設定：
ビューワープロトコルポリシーで「HTTPS only」を選択します。
WAF：
本記事では「WAFを有効にしない」を選択しますが、必要に応じて有効にしてください。
その他の設定はデフォルトのままで作成します。
作成が完了すると、S3バケットポリシーの更新を促すメッセージが表示されます。「ポリシーのコピー」をクリックしてポリシーをコピーします。
S3バケットポリシーの変更
S3バケットポリシーを変更し、CloudFront経由でのアクセスを許可します。
S3コンソールで作成したバケットに移動し、「アクセス許可」タブの「バケットポリシー」セクションで「編集」をクリックします。
ポリシーの記入欄にコピーしたポリシーをペーストし、「変更を保存」をクリックします。
アクセスの確認
設定が完了したら、実際にアクセスして確認します。
CloudFrontコンソールで作成したディストリビューションの詳細を開きます。
「一般」タブの「詳細」内にある「ディストリビューションドメイン名」を確認します。
ブラウザで「https://[ディストリビューションドメイン名]/[HTMLファイル名]」にアクセスします。
例：https://d1234abcd.cloudfront.net/index.html
正しく設定されていれば、S3にアップロードしたWebサイトが表示されます。
最後に
CloudFrontを経由したS3の静的ウェブサイト公開により、S3をパブリックに公開することなくアクセスできるようになりました。これにより、直接アクセスを防ぎ、セキュリティが向上します。
補足
S3の静的ウェブホスティングで提供される機能（インデックスドキュメントやリダイレクトなど）は、この設定では利用できません。
これらの機能が必要な場合は、CloudFront Functionsを使用して同様の機能を実現することができます。
参考資料
アノテーション株式会社について
アノテーション株式会社はクラスメソッドグループのオペレーション専門特化企業です。サポート・運用・開発保守・情シス・バックオフィスの専門チームが、最新 IT テクノロジー、高い技術力、蓄積されたノウハウをフル活用し、お客様の課題解決を行っています。当社は様々な職種でメンバーを募集しています。「オペレーション・エクセレンス」と「らしく働く、らしく生きる」を共に実現するカルチャー・しくみ・働き方にご興味がある方は、アノテーション株式会社 採用サイトをぜひご覧ください。
![[アップデート] Application Load Balancer コンソールから CloudFront + WAF を統合出来るようになりました](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-f650a3011b384cc3781610c17755bc71/c37c67c9bc40b72e6dce1a49f4153283/elastic-load-balancing)
